<template>
  <div class="app">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="person.age += 1">修改年龄</button>
    <hr />
    <h2>{{ car }}</h2>
    <button @click="car.price += 10">点我价格+10</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import { markRaw, reactive, toRaw } from "vue";
  import mockjs from "mockjs";

  /* toRaw:用于获取一个响应式对象的原始对象*/
  let person = reactive({
    name: "Tony",
    age: 18,
  });
  let rawPerson = toRaw(person);
  console.log("响应式数据", person);
  console.log("原始数据", rawPerson);

  /* markRaw:标记一个对象,使其永远不会变成响应式的 */
  let car = markRaw({ brand: "奔驰", price: 100 });
  let car2 = reactive(car);
  console.log(car);
  console.log(car2);
  console.log(mockjs);
</script>

<style scoped>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
  }
  button {
    margin: 0 5px;
  }
</style>
